<template>
	<div id="root">
	  <div class="todo-container">
	    <div class="todo-wrap">
				<!-- 
				 这样写是可以的，todos是个数组，我可以把数组传给MyList；
				 那我把addTodo方法传给MyHeader不可以吗？ 当然可以；
				 -->
	      <MyHeader :addTodo="addTodo"></MyHeader>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo = "deleteTodo"></MyList>
				<MyFooter :todoCount = ></MyFooter>
	    </div>
	  </div>
	</div>
	
</template>

<script>
	import MyFooter from "./components/MyFooter.vue"
	import MyHeader from "./components/MyHeader.vue"
	import MyList from "./components/MyList.vue"
	
	export default {
		name:"App",
		components:{
			MyFooter,
			MyHeader,
			MyList,
		},
		methods:{
			//添加一个todo 
			addTodo(todoObj){
				this.todos.unshift(todoObj);
			},
			
			//取消勾选or勾选
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(id === todo.id){
						todo.done = !todo.todo
					}
				})
			},
			
			//删除一个todo
			deleteTodo(id){
				/* 
				这个过滤怎写？return是返回过滤条件：
				return todo.id == id//filter不改变原数组，会返回一个
				
				this.todos.filter((todo) => {
					return todo.id == id
				})
				只有一个参数，简写为：
				this.todos.filter(todo => {
					return todo.id == id
				})
				箭头函数有返回值，并且只有一个函数体：
				this.todos.filter(todo => todo.id == id)
				 */
				this.todos = this.todos.filter(todo => todo.id !== id)
			}
		},
		data(){
			return {
			todos:[
				{id:"001",title:"学习C4D",done:true},
				{id:"002",title:"学习Vue",done:false},
				{id:"004",title:"打牌",done:true},
			]
		};
		},
	}
</script>
<style>
	/*base*/
	body {
	  background: #fff;
	}
	
	.btn {
	  display: inline-block;
	  padding: 4px 12px;
	  margin-bottom: 0;
	  font-size: 14px;
	  line-height: 20px;
	  text-align: center;
	  vertical-align: middle;
	  cursor: pointer;
	  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	  border-radius: 4px;
	}
	
	.btn-danger {
	  color: #fff; /* 字体颜色*/
	  background-color: #da4f49;
	  border: 1px solid #bd362f;
	}
	
	.btn-danger:hover {
	  color: #fff;
	  background-color: #bd362f;
	}
	
	.btn:focus {
	  outline: none;
	}
	
	.todo-container {
	  width: 600px;
	  margin: 0 auto;
	}
	
	.todo-container .todo-wrap {
	  padding: 10px;
	  border: 1px solid #ddd;
	  border-radius: 5px;
	}
	
	
	
	
	
	
	
</style>